<template>
  <div :class="wrapClass" style="width: 100%; height: 720px" :id="id"></div>
</template>

<script>
import { COLORS } from "@/constants";
import mixins from "./mixins";
export default {
  name: "hbar",
  mixins: [mixins],
  props: {
    id: {
      type: String,
      default: "hbar",
    },
    wrapClass: String,
    option: {
      type: Object,
      default: () => {},
    },
    legend: {
      type: Array,
      default: () => [],
    },
    yLabel: {
      type: Array,
      default: () => [],
    },
    yData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getDefOptions() {
      const geneteYData = () => {
        const series = [];
        let len = this.yData.length - 1;
        this.yData.forEach((item, i) => {
          series.push({
            name: item.name,
            type: "bar",
            stack: "总量",
            barWidth: "30%",
            label: {
              normal: {
                show: false,
                position: "insideRight",
                textStyle: {
                  color: "white",
                  fontSize: 14,
                },
              },
            },
            itemStyle: {
              barBorderRadius:
                i === 0
                  ? [10, 0, 0, 10]
                  : i === len
                  ? [0, 10, 10, 0]
                  : [0, 0, 0, 0],
            },
            zlevel: 5,
            // barWidth: '15%',
            data: item.rate,
          });
        });
        return series;
      };
      const defOption = {
        color: COLORS,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: 0,
          formatter: (params) => {
            return this.formatTipInfo(params);
          },
        },
        legend: {
          data: this.legend,
          top: 10,
          left: 30,
          itemGap: 20,
          icon: "rect",
          // selectedMode: false,
          textStyle: {
            color: "#767e91",
          },
          selectorItemGap: 20,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show:false,
           axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          min: 0, //一定要设置最小刻度
          max: 100, //一定要设置最大刻度
          axisLabel: {
            color: "#767e91",
            formatter: function (value,index) {
              return `${value*100}%`;
            },
          }
        },
        yAxis: {
          type: "category",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#767e91",
          },
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          data: this.yLabel,
        },
        series: geneteYData(),
      };

      return Object.assign({}, defOption, this.option);
    },
  },
  mounted() {
    const options = this.getDefOptions;
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById(this.id));
      this.myCharts.setOption(options);
      this.myCharts.on("click", (params) => {
        const { name } = params;
        console.log(11111, name);
        this.$emit("clickBar", name);
      });
      this.myCharts.on("legendselectchanged", (params) => {
        const { name } = params;
        // alert(`跳转到话题页: ${name}`);
        this.$emit("clickLegend", name);
      });
      this.handleResize(this.myCharts);
    }
  },
  watch: {
    getDefOptions: {
      handler: function (nval) {
        this.myCharts.setOption(nval);
      },
      deep: true,
    },
  },
  methods: {
    formatTipInfo(params) {
      let htmlStr =
        "<div style='background: #282b3c; border-radius: 5px; padding: 20px; width: 160px;'>";
      htmlStr += `
        <div style="display: flex; border-bottom: 1px solid #ff6666; align-items: center; height: 28px;">
          <div style="width: 4px; height: 4px; position: relative; background: #ff6666"></div>
          <div style="font-size: 12px; color: #e6e9f5; margin-left: 5px;">06-04  16: 00</div>
        </div>
      `;

      for (var i = 0; i < params.length; i++) {
        htmlStr += `
        <div style="margin-top: 20px;">
          <div style="display: flex; height: 12px; align-items: center;">
            <div style="background: ${
              COLORS[i]
            }; width: 18px; height: 12px;"></div>
            <div style="font-size: 12px; color: #767e91; margin-left: 10px;">${
              params[i].seriesName
            }</div>
          </div>
          <div style="color: #fff; font-size: 14px; line-height: 1; margin-top: 13px">${
            params[i].value[1] || params[i].value
          }%</div>
        </div>
      `;
      }
      htmlStr += "</div>";
      return htmlStr;
    },
  },
};
</script>
